<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <title>Document</title>
</head>

<body>
    <!-- 首页头 -->
    <div class="index_header">
        <div class="index_header_bg">
            <img src="https://www.hotread.com/assets/images/newlogo.png" alt="">
            <div class="hotreadAndGirl">
                <span class="on">火星小说</span>
                <span>|</span>
                <span onclick="jumpNv()">火星女频</span>
            </div>
            <div class="search-content">
                <input type="text" placeholder="龙王棺" class="search-text">
                <img src="../img/index_search.png" alt="">
            </div>
            <div class="main-login">
                <div>
                    <span>书架</span>
                    <span>|</span>
                    <span>充值</span>
                </div>
                <div>
                    <span onclick="jumpRegis()">注册</span>
                    <span>|</span>
                    <span onclick="login()">登录</span>
                </div>
            </div>
        </div>
        <ul>
            <li style="color: #333;">
                热搜：
            </li>
            <li>
                <span>
                    蛇孽
                </span>
            </li>
            <li>
                <span>
                    湘西秘闻
                </span>
            </li>
            <li>
                <span>
                    重生1980
                </span>
            </li>
        </ul>
    </div>
    <div class="index_swiper">
        <div class="swiper-container">
            <div class="swiper-wrapper">

            </div>
            <!-- Add Pagination -->
            <!-- <div class="swiper-pagination"></div> -->
        </div>
    </div>
    <div class="hotr-nav">
        <ul>
            <li class="on">首页</li>
            <li onclick="jumpRank()">排行</li>
            <li onclick="jumpBook()">书库</li>
            <li onclick="jumpManhua()">动漫</li>
            <li onclick="jumpClient()">客户端</li>
            <li onclick="jumpWelfare()">作家福利</li>
            <li onclick="jumpAuthor()">作者中心</li>
        </ul>
    </div>
    <!-- 首页nav下面的块 -->
    <div class="weekHot_home">
        <div class="weekHot-main">
            <div class="weekHot-main_swiper">
                <div class="swiper-container swiper-container1"> <!-- 增加swiper-container类 -->
                    <div class="swiper-wrapper swiper-wrapper1"> <!-- 增加swiper-wrapper类 -->
                        <div class="swiper-slide swiper-slide1">
                            <div>
                                <img src="https://p2.duyao001.com/image/common/8e12420814764ec54d3f5f5e950e8d41.jpg"
                                    alt="">
                                <h2> 风水怪谈：我是拜阴仙 </h2>
                                <p>三尺高堂三尺仙，门仙朱砂点门前。七十年代，陈家老堂，堂口拜阴，捞出了几副棺椁来。那年头，陈家村的村民们穷热闹了，开棺地主们的坟丘发家致富，分抢了棺里的大批元宝铜币，却这么拜出了因和果，一代招惹了一代人的白发人送黑发人...我叫陈小三，命数兜兜转转，无奈之下还是让我成了一个拜阴仙。
                                </p>
                            </div>

                        </div>
                        <div class="swiper-slide swiper-slide1">
                            <div>
                                <img src="https://p0.duyao001.com/image/common/1e4637ae4f96adf2e4899b1399314694.jpg"
                                    alt="">

                                <h2> 邪物典当行：我只算大凶命 </h2>
                                <p>邪物典当行：我只算大凶命
                                </p>

                            </div>
                        </div>
                        <div class="swiper-slide swiper-slide1">
                            <div>
                                <img src="https://p1.duyao001.com/image/common/a9effdcde80a9b4d6eac91b292e9af4e.jpg"
                                    alt="">
                                <h2> 玄幻：我能随机刷新境界 </h2>
                                <p>萧峰穿越了，成了一个富二代。
                                    原主不修炼，就知道跪舔师妹，结果郁闷而亡。
                                    他才不会恋爱脑，触发金手指、打脸渣男师父、脚踹海王师妹。
                                    萧峰一跃成为掌门关门弟子，同修真界第一美人谈恋爱。
                                </p>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
            <div class="bookIntro">
                <div class="bookIntro-rect">
                    <span>湘西秘闻：在那些漂亮的女人身上挣钱</span>
                    <p class="bookIntro-content">
                        简介：因遭天谴，想要活长命点，我家世世代代都要做好事，得穷，但我想讨老婆，我想有钱，所以，我决定挣钱，在那些漂亮的女人身上挣钱。
                    </p>
                </div>
                <div class="bookIntro-rect">
                    <span>一人一驴一狗去修仙：与天斗其乐无穷</span>
                    <p class="bookIntro-content">
                        简介：多人有声已在喜马拉雅上线，有声的紫襟团队倾情录制，播放量已超四亿，喜欢听书的朋友可以去支持下。
                        新书‘坏了，荒古禁地出了个祸害’火热连载中，搞笑热血，精彩反转，不容错过。
                        【苟贱+夺笋+腹黑+爽文+老六+轻松+无节操】
                        与人斗：大黑，你去当诱饵！二驴子，你踹他屁股，我敲丫后脑勺！
                        与鬼斗：大黑，吐血喷它！二驴子，放屁熏它，我用神火霹雳丹炸它！
                        与妖斗：大黑，五步倒三倍量！二驴子，捆妖绳，迷魂阵伺候，我锅呢？
                        与仙斗：大黑，不要莽，苟一波！二驴子，不要怂，驴死吊朝上！我还有事，先走一步!
                        与天斗：其乐无穷。
                        吴北良：仙草、灵气、鬼晶，妖丹都是我的，谁特么敢抢试试？二驴子，关门，放大黑！
                    </p>
                </div>
                <div class="bookIntro-rect">
                    <span>天命守棺人：为了延续香火，爷爷逆天改命</span>
                    <div>
                        <div class="bookIntro-rect-left">
                            [科幻] 揭秘宇宙间最伟大的秘密
                        </div>
                        <div class="bookIntro-rect-right">
                            [惊悚] 家破人亡竟是有人在背后搞鬼
                        </div>
                    </div>
                    <div>
                        <div class="bookIntro-rect-left">
                            [废材] 女帝姐姐，能否和你同修功法
                        </div>
                        <div class="bookIntro-rect-right">
                            [历史] 皇帝偷听我心声后，退位让贤
                        </div>
                    </div>
                    <div>
                        <div class="bookIntro-rect-left">
                            [逆袭] 749局请我捉妖，你占我道观
                        </div>
                        <div class="bookIntro-rect-right">
                            [悬疑] 捞尸+妖妻+鬼怪+惊悚
                        </div>
                    </div>
                    <div>
                        <div class="bookIntro-rect-left">
                            [悬疑] 邪物典当行：我只算大凶命
                        </div>
                        <div class="bookIntro-rect-right">
                            [历史] 狗官，还说你不会武功
                        </div>
                    </div>
                </div>
                <div class="bookNews">
                    <img src="https://c.hotread.com/boyPc/assets/images/huoxing.png" alt="">
                    <div class="bookNews-line"></div>
                    <div>
                        <p>《我的女主别太萌》：赖美云吴俊余演绎甜萌爱情</p>
                        <p>《情暖三坊七巷》获得第五届中国出版政府奖提名奖</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="ranking_typeRank_home">
            <div class="rankTitle">
                小说月票榜
            </div>
            <ul class="onul">

            </ul>
            <div class="more" onclick="jumpBook()">
                <p>查看更多</p>
                <img src="../img/youjiantou.png" alt="">
            </div>
        </div>
    </div>
    <!-- 会缩放图片1 -->
    <div class="index-banner">
        <img id="bannerImg" src="https://p1.duyao001.com/image/common/f47314c3f10b1b3f3e3dce7834a79543.jpg" alt=""
            onmouseover="big_img(true, 'bannerImg')" onmouseout="big_img(false, 'bannerImg')">
    </div>
    <!-- 封面推荐 -->
    <div class="coverRecommend">
        <div class="coverRecommend-rect">
            <div class="coverRecommend-title">
                封面推荐
            </div>
            <ul class="coverRecommend-list">

            </ul>

        </div>

        <div class="newRank_home">
            <h3 class="head">
                精品小说榜
            </h3>
            <ul class="Fine_list">
                <li>
                    <div class="tag">[悬疑]</div>
                    <div class="name">让你守棺，没让你娶棺中人</div>
                    <div class="author">青年晚报</div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 四个榜单 -->
    <div class="rankBox-rect">
        <div class="ranking_typeRank_home">
            <div class="rankTitle">
                人气榜
                <div>
                    <span data-type="week" class="active">周</span>
                    <span data-type="month">月</span>
                    <span data-type="total">总</span>
                </div>
            </div>
            <ul class="onul">

            </ul>
            <div class="more" onclick="jumpBook()">
                <p>查看更多</p>
                <img src="../img/youjiantou.png" alt="">
            </div>
        </div>
        <div class="ranking_typeRank_home">
            <div class="rankTitle">
                推荐榜
                <div>
                    <span data-type="week" class="active">周</span>
                    <span data-type="month">月</span>
                    <span data-type="total">总</span>
                </div>
            </div>
            <ul class="onul">

            </ul>
            <div class="more" onclick="jumpBook()">
                <p>查看更多</p>
                <img src="../img/youjiantou.png" alt="">
            </div>
        </div>
        <div class="ranking_typeRank_home">
            <div class="rankTitle">
                打赏榜
                <div>
                    <span data-type="week" class="active">周</span>
                    <span data-type="month">月</span>
                    <span data-type="total">总</span>
                </div>
            </div>
            <ul class="onul">

            </ul>
            <div class="more" onclick="jumpBook()">
                <p>查看更多</p>
                <img src="../img/youjiantou.png" alt="">
            </div>
        </div>
        <div class="ranking_typeRank_home">
            <div class="rankTitle">
                分享榜
                <div>
                    <span data-type="week" class="active">周</span>
                    <span data-type="month">月</span>
                    <span data-type="total">总</span>
                </div>
            </div>
            <ul class="onul">

            </ul>
            <div class="more" onclick="jumpBook()">
                <p>查看更多</p>
                <img src="../img/youjiantou.png" alt="">
            </div>
        </div>
    </div>
    <!-- 会缩放图片2 -->
    <div class="index-banner">
        <img id="bannerImg1" src="https://p0.duyao001.com/image/common/6926f630a8d92db94511f9b67e5d47f0.jpg" alt=""
            onmouseover="big_img(true, 'bannerImg1')" onmouseout="big_img(false, 'bannerImg1')">
    </div>
    <!-- 分类小说 -->
    <div class="classify">
        <div class="classify-rect">
            <div class="classify-title">
                分类小说
            </div>
            <div class="classify-title-more" onclick="jumpBook()">
                更多小说
                <img src="../img/youjiantou.png" alt=""></img>
            </div>
        </div>
        <ul>
            <li class="classify-li">
                <div class="classify-li-title">
                    <span class="line"></span>
                    玄幻小说
                </div>
                <div class="classify-li-center">
                    <img src="https://p1.duyao001.com/image/common/2050c7467ee954775f767a3f966ade1c_x640.jpg" alt="">
                    <div class="classify-li-center-right">
                        <div class="title">万古不灭，葬天，葬地，葬仙佛</div>
                        <div class="concent">莫欺中年穷，死者为大</div>
                        <div class="lable">玄幻仙侠 | 英姿</div>
                        <div class="number">121.7万字</div>
                    </div>
                </div>
                <div class="classify-li-footer">
                    <ul>
                        <li>
                            <div class="left">
                                [爽文]
                            </div>
                            <div class="left-classify-li-footer-center">
                                从大荒走出的修仙者
                            </div>
                            <div class="left-classify-li-footer-foot">
                                黑天白月
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                [仙侠]
                            </div>
                            <div class="left-classify-li-footer-center">
                                让你当贼，没让你修成盗仙
                            </div>
                            <div class="left-classify-li-footer-foot">
                                夏日蝉鸣
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                [重生]
                            </div>
                            <div class="left-classify-li-footer-center">
                                剑仙无敌
                            </div>
                            <div class="left-classify-li-footer-foot">
                                勤劳的蜜蜂
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                [异世大陆]
                            </div>
                            <div class="left-classify-li-footer-center">
                                玄幻：新店开业，我的超市商品百倍增幅
                            </div>
                            <div class="left-classify-li-footer-foot">
                                九叶木
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="classify-li">
                <div class="classify-li-title">
                    <span class="line"></span>
                    灵异小说
                </div>
                <div class="classify-li-center">
                    <img src="	https://p1.duyao001.com/image/common/8c5242fcba2b638a8aeb554d8998ed8a_x640.jpg" alt="">
                    <div class="classify-li-center-right">
                        <div class="title">阴物商人</div>
                        <div class="concent">
                            我在无意间触犯了苗人忌讳，身负落花洞女诅咒，不得已干起了倒卖阴物的买卖，成为一名冥商。恐怖的苗疆虫蛊、邪恶的南洋禁咒，以及各种神秘的民间法咒，将在本书一一呈现……</div>
                        <div class="lable">悬疑灵异 | 小丑</div>
                        <div class="number">306.3万字</div>
                    </div>
                </div>
                <div class="classify-li-footer">
                    <ul>
                        <li>
                            <div class="left">
                                [悬疑]
                            </div>
                            <div class="left-classify-li-footer-center">
                                恐怖复苏：我在人间当阎罗
                            </div>
                            <div class="left-classify-li-footer-foot">
                                小骗子
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                [悬疑]
                            </div>
                            <div class="left-classify-li-footer-center">
                                天命神算
                            </div>
                            <div class="left-classify-li-footer-foot">
                                寿比南山
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                [悬疑]
                            </div>
                            <div class="left-classify-li-footer-center">
                                荒村老尸
                            </div>
                            <div class="left-classify-li-footer-foot">
                                言之韵韵
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                [灵异]
                            </div>
                            <div class="left-classify-li-footer-center">
                                阳人勿扰
                            </div>
                            <div class="left-classify-li-footer-foot">
                                痴人不做梦
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="classify-li">
                <div class="classify-li-title">
                    <span class="line"></span>
                    都市小说
                </div>
                <div class="classify-li-center">
                    <img src="https://p0.duyao001.com/image/common/7f7e8f8c6076546dc9c16cae4fa1992c_x640.jpg" alt="">
                    <div class="classify-li-center-right">
                        <div class="title">九州狂龙，入世即无敌</div>
                        <div class="concent">【高手下山+九张婚书+热血无敌+无系统都市爽文】
                            身为这方世界最恐怖区域的少主，秦九霄的生活非常单调，直到这天，一个绝色美女上门退婚，狂龙入世，精彩的人生如同一副浓墨重彩的水墨画一一展开！
                            世人问：秦九霄，何人也？
                            他权势滔天，富可敌国！
                            他是九州狂龙，入世即无敌！</div>
                        <div class="lable">现代都市 | 墨明棋妙</div>
                        <div class="number">101.4万字</div>
                    </div>
                </div>
                <div class="classify-li-footer">
                    <ul>
                        <li>
                            <div class="left">
                                [逆袭]
                            </div>
                            <div class="left-classify-li-footer-center">
                                丈夫的复仇
                            </div>
                            <div class="left-classify-li-footer-foot">
                                我爱小西瓜
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                [逆袭]
                            </div>
                            <div class="left-classify-li-footer-center">
                                万能模拟器
                            </div>
                            <div class="left-classify-li-footer-foot">
                                大熊
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                [逆袭]
                            </div>
                            <div class="left-classify-li-footer-center">
                                重回1991
                            </div>
                            <div class="left-classify-li-footer-foot">
                                怀旧的笔
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                [种田]
                            </div>
                            <div class="left-classify-li-footer-center">
                                重生1985：开局老婆生二胎
                            </div>
                            <div class="left-classify-li-footer-foot">
                                大白米
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="classify-li">
                <div class="classify-li-title">
                    <span class="line"></span>
                    悬疑小说
                </div>
                <div class="classify-li-center">
                    <img src="https://p0.duyao001.com/image/common/ea07d7fa50822307a2789bfe0ee55e84_x640.jpg" alt="">
                    <div class="classify-li-center-right">
                        <div class="title">多情岁月</div>
                        <div class="concent">真实的黑社会，真实的保护伞，真实的刑侦，复杂的人性体现。</div>
                        <div class="lable">悬疑灵异 | 心蟲</div>
                        <div class="number">101.4万字</div>
                    </div>
                </div>
                <div class="classify-li-footer">
                    <ul>
                        <li>
                            <div class="left">
                                [悬疑]
                            </div>
                            <div class="left-classify-li-footer-center">
                                民间禁忌杂谈
                            </div>
                            <div class="left-classify-li-footer-foot">
                                苏皖
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                [悬疑]
                            </div>
                            <div class="left-classify-li-footer-center">
                                我靠凶宅直播发财致富
                            </div>
                            <div class="left-classify-li-footer-foot">
                                凶宅中间商
                            </div>
                        </li>
                        <li>
                            <div class="left">
                                [悬疑]
                            </div>
                            <div class="left-classify-li-footer-center">
                                民间阴阳诡事录
                            </div>
                            <div class="left-classify-li-footer-foot">
                                小霸王李平安
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <!-- 新书推荐 -->
    <div class="newBook" id="newBookSection">
        <div class="newBook-rect">
            <div class="newBook-rect-top">
                <div class="newBook-title">新书推荐</div>
                <div class="classify-title-more" onclick="jumpBook()">
                    更多小说
                    <img src="../img/youjiantou.png" alt="">
                </div>
            </div>
            <ul id="newBookList">
                <!-- 新书推荐内容将在这里渲染 -->
            </ul>
        </div>
        <div class="rank6165">
            <div class="ranking_typeRank_home" id="newBookRanking">
                <div class="rankTitle">
                    新书榜
                    <div>
                        <span data-type="week" class="active">日</span>
                        <span data-type="month">周</span>
                        <span data-type="total">月</span>
                    </div>
                </div>
                <ul class="onul"></ul>
                <div class="more" onclick="jumpBook()">
                    <p>查看更多</p>
                    <img src="../img/youjiantou.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 完本推荐 -->
    <div class="newBook" id="completedBookSection">
        <div class="newBook-rect">
            <div class="newBook-rect-top">
                <div class="newBook-title">完本推荐</div>
                <div class="classify-title-more" onclick="jumpBook()">
                    更多小说
                    <img src="../img/youjiantou.png" alt="">
                </div>
            </div>
            <ul id="completedBookList">
                <!-- 完本推荐内容将在这里渲染 -->
            </ul>
        </div>
        <div class="rank6165">
            <div class="ranking_typeRank_home" id="completedBookRanking">
                <div class="rankTitle">
                    完本榜
                    <div>
                        <span data-type="week" class="active">周</span>
                        <span data-type="month">月</span>
                        <span data-type="total">总</span>
                    </div>
                </div>
                <ul class="onul"></ul>
                <div class="more" onclick="jumpBook()">
                    <p>查看更多</p>
                    <img src="../img/youjiantou.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 更新榜 -->
    <div class="newUpdate">
        <div class="newUpdate-right">
            <div class="newUpdate-right-title">
                <div class="newUpdate-title">
                    连载更新
                    <div class="newUpdate-free">
                        <span class="cutBtn-list-on">
                            免费小说
                        </span>
                        <span class="cutBtn-list">
                            VIP小说
                        </span>
                    </div>
                </div>

                <div class="classify-title-more" onclick="jumpBook()">
                    更多小说
                    <img src="../img/youjiantou.png" alt="">
                </div>
            </div>
            <ul class="bookRect">
                <li class="list-title">
                    <span class="num">
                        序号
                    </span>
                    <span class="type">
                        小说分类
                    </span>
                    <span class="bookName">
                        小说名称
                    </span>
                    <span class="chapter">
                        小说章节
                    </span>
                    <span class="author">
                        小说作者
                    </span>
                    <span class="time">
                        最新更新时间
                    </span>
                </li>
                <li>
                    <span class="num">01</span>
                    <span class="type">[古代言情]</span>
                    <span class="bookName">锦中云歌</span>
                    <span class="chapter">第六十二章 天命必违</span>
                    <span class="author">一源</span>
                    <span class="time">2025-08-29 12:03</span>
                </li>
            </ul>
        </div>
        <!-- 勤奋榜 -->
        <div class="rank6171">
            <div class="ranking_typeRank_home">
                <div class="rankTitle">
                    勤奋榜
                </div>
                <ul class="onul">

                </ul>
                <div class="more" onclick="jumpBook()">
                    <p>查看更多</p>
                    <img src="../img/youjiantou.png" alt="">
                </div>
            </div>
        </div>
    </div>
</body>
<!-- 顶部轮播js -->
<script src="../js/swiper.min.js"></script>
<script>
    const index_swiper = document.querySelector('.swiper-wrapper')
    fetch("https://www.hotread.com/api/topBanner?cb=1755778320084").then(res => res.json()).then(res1 => {
        // console.log(res1)
        res1.forEach((item) => {
            index_swiper.innerHTML +=
                `
            <div class="swiper-slide">
                <img src="${item.pic}" alt="">
            </div>
        `

        })
        new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            loop: true,
            autoplay: 2500,
        });

    }).catch(err => {
        console.log(err)
    })
</script>

<!-- 中部轮播js -->
<script>
    new Swiper('.swiper-container1', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 0,
        centeredSlides: true,
        autoplay: 2500,
        loop: true,
        autoplayDisableOnInteraction: false,
    });
</script>

<!-- 中部渲染数据 -->
<!-- 小说月票榜 -->
<script>
    const onul1 = document.querySelectorAll(".onul")[0];
    fetch("https://www.hotread.com/api/common/rank/6164/3/8?cb=1755940241744")
        .then(res => res.json())
        .then(res1 => {
            onul1.innerHTML = "";  // 修正这一行
            // console.log(666, res1.list[0]);

            res1.list.forEach((item, index) => {
                // 判断是否为第一个元素（index=0）
                const isFirstItem = index === 0;
                // 动态设置类名：第一个元素默认添加"on"，其他元素根据需要设置
                const liClass = isFirstItem ? "on" : "";

                // 排名数字格式化（确保两位数显示，如1→01，10→10）
                const rank = (index + 1).toString().padStart(2, '0');

                onul1.innerHTML += ` 
        <li class="${liClass}">
          <p>${rank}</p>
          <div>
            <span class="bookName">${item.story?.name || '未知书名'}</span>
            <span class="author">${item.story?.type || ''}|${item.story?.author || '未知作者'}</span>
            <p class="tiket">${item.topValue || 0}月票</p>
          </div>
          <img src="${item.story?.cover || ''}" alt="${item.story?.name || '书籍封面'}">
        </li>
      `;
            });

            // 绑定鼠标事件（处理动态生成的元素）
            const liItems = document.querySelectorAll(".onul li");
            liItems.forEach(item => {
                item.addEventListener('mouseover', function () {
                    liItems.forEach(li => li.classList.remove('on'));
                    this.classList.add('on');
                });
            });

        }).catch(err => {
            console.log(err);
        });
</script>

<!-- 中部鼠标经过显示隐藏 -->
<script>
    const liItems = document.querySelectorAll(".onul li");

    // 初始化 - 第一个项默认高亮
    if (liItems.length > 0) {
        liItems[0].classList.add('on');
    }

    // 只监听mouseover事件 - 只有鼠标进入新项时才切换高亮
    liItems.forEach(item => {
        item.addEventListener('mouseover', function () {
            // 移除所有项的高亮
            liItems.forEach(li => li.classList.remove('on'));
            // 给当前项添加高亮
            this.classList.add('on');
        });

        // 不添加mouseout事件，这样离开时不会取消高亮
    });

    // 也不需要监听列表容器的mouseleave事件
</script>

<!-- 图片缩放 -->
<script>
    // 缩放函数：isZoom=true 放大，isZoom=false 恢复
    function big_img(isZoom, imgId) {
        const img = document.getElementById(imgId);
        if (isZoom) {
            img.style.transform = "scale(1.05)";
            img.style.transition = "all 0.5s";
        } else {
            img.style.transform = "scale(1)";
        }
    }
</script>

<!-- 推荐 -->
<script>
    const ulRecommend = document.querySelector('.coverRecommend-list');
    let itemHtml = '';

    fetch("https://www.hotread.com/api/common/rank/6168/3/10?cb=1756120963318")
        .then(res => res.json())
        .then(res1 => {
            const recommendList = res1.list;
            // console.log(123, recommendList);
            recommendList.forEach((item) => {
                const story = item.story;
                itemHtml += `
        <li onclick='jumps(${JSON.stringify(item.story)})'>
          <img src="${story.cover}" alt="">
          <div class="coverRecommend-list-title">${story.name}</div>
          <div class="coverRecommend-list-content">${story.author}</div>
          <div class="mask">${story.introduce}</div>
        </li>
      `;
            });

            ulRecommend.innerHTML = itemHtml;
        })
        .catch(err => {
            console.error(err);
        });
</script>

<script>
    const Fine_list_ul = document.querySelector('.Fine_list');
    fetch("https://www.hotread.com/api/home/vipList?cb=1756255843695")
        .then(res => res.json())
        .then(res1 => {
            // 正确访问 vipList 数组
            const list = res1.vipList;

            // 确保 list 是数组
            if (Array.isArray(list)) {
                Fine_list_ul.innerHTML = ''; // 清空原有内容
                list.slice(0, 14).forEach((item) => {
                    // console.log(item);
                    Fine_list_ul.innerHTML += `
                    <li onclick='jumps(${JSON.stringify(item.story)})'>
                        <div class="tag">[${item.story.type}]</div>
                        <div class="name">${item.story.name}</div>
                        <div class="author">${item.story.author}</div>
                    </li>
                `;
                });
            } else {
                console.error('返回的数据不是数组:', list);
            }
        })
        .catch(err => {
            console.error(err);
        });
</script>
<!-- 人气榜计算 -->
<script>
    function formatNumber(num) {
        if (num >= 10000) {
            const wan = (num / 10000).toFixed(1);
            return wan.endsWith('.0') ? wan.slice(0, -2) + '万' : wan + '万';
        } else {
            return num.toString();
        }
    }
</script>
<!-- 人气榜 -->
<script>
    const onul2 = document.querySelectorAll(".onul")[1];
    fetch("https://www.hotread.com/api/common/rank/6161/2/10?cb=1756275630916")
        .then(res => res.json())
        .then(res1 => {
            onul2.innerHTML = "";
            // console.log(666, res1.list[0]);

            res1.list.forEach((item, index) => {
                const isFirstItem = index === 0;
                const liClass = isFirstItem ? "on" : "";

                const rank = (index + 1).toString().padStart(2, '0');

                onul2.innerHTML += ` 
        <li class="${liClass}" onclick='jumps(${JSON.stringify(item.story)})'>
          <p>${rank}</p>
          <div>
            <span class="bookName">${item.story?.name || '未知书名'}</span>
            <span class="author">${item.story?.type || ''}|${item.story?.author || '未知作者'}</span>
            <p class="tiket">${formatNumber(item.topValue) || 0}人气值</p>
          </div>
          <img src="${item.story?.cover || ''}" alt="${item.story?.name || '书籍封面'}">
        </li>
      `;
            });

            // 为当前榜单绑定鼠标事件
            const liItems = onul2.querySelectorAll("li");
            liItems.forEach(item => {
                item.addEventListener('mouseover', function () {
                    liItems.forEach(li => li.classList.remove('on'));
                    this.classList.add('on');
                });
            });

        })
</script>
<!-- 推荐榜 -->
<script>
    const onul3 = document.querySelectorAll(".onul")[2];
    fetch("https://www.hotread.com/api/common/rank/6172/2/10?cb=1756278495311")
        .then(res => res.json())
        .then(res1 => {
            onul3.innerHTML = "";  // 修正这一行：从 onul1 改为 onul3
            // console.log(666, res1.list[0]);

            res1.list.forEach((item, index) => {  // 修正这一行：从 res3 改为 res1
                // 判断是否为第一个元素（index=0）
                const isFirstItem = index === 0;
                // 动态设置类名：第一个元素默认添加"on"，其他元素根据需要设置
                const liClass = isFirstItem ? "on" : "";

                // 排名数字格式化（确保两位数显示，如1→01，10→10）
                const rank = (index + 1).toString().padStart(2, '0');

                onul3.innerHTML += ` 
        <li class="${liClass}" onclick='jumps(${JSON.stringify(item.story)})'>
          <p>${rank}</p>
          <div>
            <span class="bookName">${item.story?.name || '未知书名'}</span>
            <span class="author">${item.story?.type || ''}|${item.story?.author || '未知作者'}</span>
            <p class="tiket">${item.topValue || 0}推荐票</p>
          </div>
          <img src="${item.story?.cover || ''}" alt="${item.story?.name || '书籍封面'}">
        </li>
      `;
            });

            // 为当前榜单绑定鼠标事件
            const liItems = onul3.querySelectorAll("li");  // 修正：只选择当前榜单的li元素
            liItems.forEach(item => {
                item.addEventListener('mouseover', function () {
                    liItems.forEach(li => li.classList.remove('on'));
                    this.classList.add('on');
                });
            });

        }).catch(err => {
            console.log(err);
        });
</script>
<!-- 打赏榜 -->
<script>
    const onul4 = document.querySelectorAll(".onul")[3];
    fetch("https://www.hotread.com/api/common/rank/6168/2/10?cb=1756278495309")
        .then(res => res.json())
        .then(res1 => {
            onul4.innerHTML = "";

            res1.list.forEach((item, index) => {
                const isFirstItem = index === 0;
                const liClass = isFirstItem ? "on" : "";
                const rank = (index + 1).toString().padStart(2, '0');

                onul4.innerHTML += ` 
        <li class="${liClass}" onclick='jumps(${JSON.stringify(item.story)})'>
          <p>${rank}</p>
          <div>
            <span class="bookName">${item.story?.name || '未知书名'}</span>
            <span class="author">${item.story?.type || ''}|${item.story?.author || '未知作者'}</span>
            <p class="tiket">${item.topValue || 0}火星币</p>
          </div>
          <img src="${item.story?.cover || ''}" alt="${item.story?.name || '书籍封面'}">
        </li>
      `;
            });

            const liItems = onul4.querySelectorAll("li");
            liItems.forEach(item => {
                item.addEventListener('mouseover', function () {
                    liItems.forEach(li => li.classList.remove('on'));
                    this.classList.add('on');
                });
            });

        }).catch(err => {
            console.log(err);
        });
</script>
<!-- 分享榜 -->
<script>
    const onul5 = document.querySelectorAll(".onul")[4];
    fetch("https://www.hotread.com/api/common/rank/6163/2/10?cb=1756278495307")
        .then(res => res.json())
        .then(res1 => {
            onul5.innerHTML = "";

            res1.list.forEach((item, index) => {
                const isFirstItem = index === 0;
                const liClass = isFirstItem ? "on" : "";
                const rank = (index + 1).toString().padStart(2, '0');

                onul5.innerHTML += ` 
        <li class="${liClass}" onclick='jumps(${JSON.stringify(item.story)})'>
          <p>${rank}</p>
          <div>
            <span class="bookName">${item.story?.name || '未知书名'}</span>
            <span class="author">${item.story?.type || ''}|${item.story?.author || '未知作者'}</span>
            <p class="tiket">${item.topValue || 0}分享</p>
          </div>
          <img src="${item.story?.cover || ''}" alt="${item.story?.name || '书籍封面'}">
        </li>
      `;
            });

            const liItems = onul5.querySelectorAll("li");
            liItems.forEach(item => {
                item.addEventListener('mouseover', function () {
                    liItems.forEach(li => li.classList.remove('on'));
                    this.classList.add('on');
                });
            });

        }).catch(err => {
            console.log(err);
        });
</script>
<!-- 周月全部切换 -->
<script>
    // 榜单类型映射
    const rankTypeMap = {
        '小说月票榜': {
            week: 2,
            month: 3,
            total: 0
        },
        '人气榜': {
            week: 2,
            month: 3,
            total: 0
        },
        '推荐榜': {
            week: 2,
            month: 3,
            total: 0
        },
        '打赏榜': {
            week: 2,
            month: 3,
            total: 0
        },
        '分享榜': {
            week: 2,
            month: 3,
            total: 0
        },
        '新书榜': {
            week: 1,
            month: 2,
            total: 3
        },
        '完本榜': {
            week: 2,
            month: 3,
            total: 0
        }
    };

    // 加载榜单数据的函数
    function loadRankData(ulElement, rankId, index, title, type) {
        let apiUrl = '';
        if (title === '人气榜') {
            apiUrl = `https://www.hotread.com/api/common/rank/6161/${rankId}/10?cb=1756275630916`;
        } else if (title === '推荐榜') {
            apiUrl = `https://www.hotread.com/api/common/rank/6163/${rankId}/10?cb=1756278495311`;
        } else if (title === '打赏榜') {
            apiUrl = `https://www.hotread.com/api/common/rank/6168/${rankId}/10?cb=1756278495309`;
        } else if (title === '分享榜') {
            apiUrl = `https://www.hotread.com/api/common/rank/6172/${rankId}/10?cb=1756278495307`;
        } else if (title === '小说月票榜') {
            apiUrl = `https://www.hotread.com/api/common/rank/6164/${rankId}/8?cb=1755940241744`;
        } else if (title === '新书榜') {
            apiUrl = `https://www.hotread.com/api/common/rank/6165/${rankId}/7?cb=1756429753063`;
        } else if (title === '完本榜') {
            apiUrl = `https://www.hotread.com/api/common/rank/6170/${rankId}/7?cb=1756435321561`;
        }

        return fetch(apiUrl)
            .then(res => res.json())
            .then(res1 => {
                ulElement.innerHTML = "";

                res1.list.forEach((item, idx) => {
                    const isFirstItem = idx === 0;
                    const liClass = isFirstItem ? "on" : "";
                    const rank = (idx + 1).toString().padStart(2, '0');

                    // 根据榜单类型确定显示的标签文本
                    let labelText = '';
                    if (title === '人气榜') labelText = '人气值';
                    else if (title === '推荐榜') labelText = '推荐值';
                    else if (title === '打赏榜') labelText = '打赏值';
                    else if (title === '分享榜') labelText = '分享值';
                    else if (title === '小说月票榜') labelText = '月票';
                    else if (title === '新书榜') labelText = '人气值';
                    else if (title === '完本榜') labelText = '人气值';
                    else labelText = '月票';

                    ulElement.innerHTML += ` 
    <li class="${liClass}" onclick='jumps(${JSON.stringify(item.story)})'>
      <p>${rank}</p>
      <div>
        <span class="bookName">${item.story?.name || '未知书名'}</span>
        <span class="author">${item.story?.type || ''}|${item.story?.author || '未知作者'}</span>
        <p class="tiket">${formatNumber(item.topValue || 0)}${labelText}</p>
      </div>
      <img src="${item.story?.cover || ''}" alt="${item.story?.name || '书籍封面'}">
    </li>
  `;
                });

                // 为当前榜单绑定鼠标事件
                const liItems = ulElement.querySelectorAll("li");
                liItems.forEach(item => {
                    item.addEventListener('mouseover', function () {
                        liItems.forEach(li => li.classList.remove('on'));
                        this.classList.add('on');
                    });
                });

            }).catch(err => {
                console.log(err);
            });
    }

    // 为所有榜单添加切换事件监听
    function initRankingEvents() {
        const rankBoxes = document.querySelectorAll('.ranking_typeRank_home');
        rankBoxes.forEach((rankBox) => {
            const titleElement = rankBox.querySelector('.rankTitle');
            if (!titleElement) return;

            // 获取标题文本，排除后面的div元素
            const title = titleElement.childNodes[0].textContent.trim();
            console.log("榜单标题:", title);

            const tabs = rankBox.querySelectorAll('.rankTitle span[data-type]');
            const onul = rankBox.querySelector('.onul');

            tabs.forEach(tab => {
                tab.addEventListener('click', function () {
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');

                    const type = this.getAttribute('data-type');
                    const rankId = rankTypeMap[title]?.[type];
                    if (rankId !== undefined) {
                        loadRankData(onul, rankId, 0, title, type);
                    } else {
                        console.error("未找到对应的榜单配置:", title, type);
                    }
                });
            });
        });
    }

    // 初始化所有榜单的月榜数据
    function initRankingData() {
        const rankBoxes = document.querySelectorAll('.ranking_typeRank_home');
        let loadedCount = 0;
        const totalBoxes = rankBoxes.length;

        rankBoxes.forEach((rankBox, index) => {
            const titleElement = rankBox.querySelector('.rankTitle');
            if (!titleElement) return;

            // 获取标题文本，排除后面的div元素
            const title = titleElement.childNodes[0].textContent.trim();
            const onul = rankBox.querySelector('.onul');

            // 检查是否存在对应的配置
            if (!rankTypeMap[title]) {
                console.error("未找到榜单配置:", title);
                return;
            }

            const rankId = rankTypeMap[title].month;

            // 加载月榜数据
            loadRankData(onul, rankId, index, title, 'month').then(() => {
                loadedCount++;

                // 当所有数据加载完成后，更新tab状态
                if (loadedCount === totalBoxes) {
                    updateTabActiveStates();
                }
            });
        });
    }

    // 更新所有tab的active状态
    function updateTabActiveStates() {
        const rankBoxes = document.querySelectorAll('.ranking_typeRank_home');
        rankBoxes.forEach((rankBox) => {
            const tabs = rankBox.querySelectorAll('.rankTitle span[data-type]');
            tabs.forEach(tab => {
                tab.classList.remove('active');
                if (tab.getAttribute('data-type') === 'month') {
                    tab.classList.add('active');
                }
            });
        });
    }

    // 页面加载完成后初始化
    function init() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', function () {
                initRankingEvents();
                initRankingData();
            });
        } else {
            initRankingEvents();
            initRankingData();
        }
    }

    // 启动初始化
    init();
</script>
<!-- 新书榜 -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const newBookRank = document.getElementById('newBookRanking');
        if (!newBookRank) {
            console.error("未找到新书推荐榜单容器");
            return;
        }

        const tabs = newBookRank.querySelectorAll('.rankTitle span[data-type]');
        const onul = newBookRank.querySelector('.onul');

        // 接口基础 URL
        const baseUrl = 'https://www.hotread.com/api/common/rank/6165/';
        const typeMap = { week: 1, month: 2, total: 3 };

        function formatNumber(num) {
            if (num >= 10000) {
                const wan = (num / 10000).toFixed(1);
                return wan.endsWith('.0') ? wan.slice(0, -2) + '万' : wan + '万';
            } else {
                return num.toString();
            }
        }

        function renderData(data, ulElement) {
            ulElement.innerHTML = "";

            data.list.forEach((item, index) => {
                const isFirstItem = index === 0;
                const liClass = isFirstItem ? "on" : "";
                const rank = (index + 1).toString().padStart(2, '0');

                ulElement.innerHTML += `
                    <li class="${liClass}" onclick='jumps(${JSON.stringify(item.story)})'>
                        <p>${rank}</p>
                        <div>
                            <span class="bookName">${item.story?.name || '未知书名'}</span>
                            <span class="author">${item.story?.type || ''}|${item.story?.author || '未知作者'}</span>
                            <p class="tiket">${formatNumber(item.topValue) || 0}人气值</p>
                        </div>
                        <img src="${item.story?.cover || ''}" alt="${item.story?.name || '书籍封面'}">
                    </li>
                `;
            });

            const liItems = ulElement.querySelectorAll("li");
            liItems.forEach(item => {
                item.addEventListener('mouseover', function () {
                    liItems.forEach(li => li.classList.remove('on'));
                    this.classList.add('on');
                });
            });
        }

        function fetchData(type = 'week') {
            const rankId = typeMap[type];
            const url = `${baseUrl}${rankId}/7?cb=1756429753063`;

            fetch(url)
                .then(res => res.json())
                .then(res1 => {
                    renderData(res1, onul);
                })
                .catch(err => {
                    console.error('新书榜请求失败:', err);
                });
        }

        // 初始化加载周榜
        fetchData('week');

        // 绑定 tab 点击事件
        tabs.forEach(tab => {
            tab.addEventListener('click', function () {
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');

                const type = this.getAttribute('data-type');
                fetchData(type);
            });
        });
    });
</script>
<!-- 新书推荐 -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // 新书推荐列表
        const newBookList = document.getElementById('newBookList');

        if (!newBookList) {
            console.error("未找到新书推荐列表容器");
            return;
        }

        fetch("https://www.hotread.com/api/common/rank/6161/3/9?cb=1756433168744")
            .then(res => res.json())
            .then(res1 => {
                const newRes1 = res1.list.slice(3, 9);
                console.log("新书推荐数据:", newRes1);

                // 清空原有内容
                newBookList.innerHTML = '';

                // 渲染数据到页面
                newRes1.forEach(item => {
                    const story = item.story;
                    if (story) {
                        const li = document.createElement('li');
                        li.className = 'newBook-rect-ul-li';
                        li.innerHTML = `
                        <img src="${story.cover || '../img/default-cover.jpg'}" alt="${story.name || '书籍封面'}" onclick='jumps(${JSON.stringify(item.story)})'>
                        <div class="newBook-rect-ul-li-right" onclick='jumps(${JSON.stringify(item.story)})'>
                            <div class="title">${story.name || '未知书名'}</div>
                            <div class="label">${story.type || '未知类型'} | ${story.author || '未知作者'}</div>
                            <div class="concent">${story.introduce || '暂无简介'}</div>
                            <div class="more">
                                小说详情 
                                <img src="../img/youjiantou.png" alt="">
                            </div>
                        </div>
                    `;
                        newBookList.appendChild(li);
                    }
                });
            })
            .catch(err => {
                console.error('新书推荐数据请求失败:', err);
            });
    });
</script>

<!-- 完本推荐数据渲染 -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // 完本推荐列表
        const completedBookList = document.getElementById('completedBookList');

        if (!completedBookList) {
            console.error("未找到完本推荐列表容器");
            return;
        }

        fetch("https://www.hotread.com/api/common/rank/6168/3/9?cb=1756434064907")
            .then(res => res.json())
            .then(res1 => {
                const completedRes1 = res1.list.slice(3, 9);
                console.log("完本推荐数据:", completedRes1);

                // 清空原有内容
                completedBookList.innerHTML = '';

                // 渲染数据到页面
                completedRes1.forEach(item => {
                    const story = item.story;
                    if (story) {
                        const li = document.createElement('li');
                        li.className = 'newBook-rect-ul-li';
                        li.innerHTML = `
                        <img src="${story.cover || '../img/default-cover.jpg'}" alt="${story.name || '书籍封面'}" onclick='jumps(${JSON.stringify(item.story)})'>
                        <div class="newBook-rect-ul-li-right" onclick='jumps(${JSON.stringify(item.story)})'>
                            <div class="title">${story.name || '未知书名'}</div>
                            <div class="label">${story.type || '未知类型'} | ${story.author || '未知作者'}</div>
                            <div class="concent">${story.introduce || '暂无简介'}</div>
                            <div class="more">
                                小说详情 
                                <img src="../img/youjiantou.png" alt="">
                            </div>
                        </div>
                    `;
                        completedBookList.appendChild(li);
                    }
                });
            })
            .catch(err => {
                console.error('完本推荐数据请求失败:', err);
            });
    });
</script>

<!-- 完本榜榜单 -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const newBookRank = document.getElementById('newBookRanking');
        if (!newBookRank) {
            console.error("未找到新书推荐榜单容器");
            return;
        }

        const tabs = newBookRank.querySelectorAll('.rankTitle span[data-type]');
        const onul = newBookRank.querySelector('.onul');

        // 接口基础 URL
        const baseUrl = 'https://www.hotread.com/api/common/rank/6170/';
        const typeMap = { week: 2, month: 3, total: 0 };

        function formatNumber(num) {
            if (num >= 10000) {
                const wan = (num / 10000).toFixed(1);
                return wan.endsWith('.0') ? wan.slice(0, -2) + '万' : wan + '万';
            } else {
                return num.toString();
            }
        }

        function renderData(data, ulElement) {
            ulElement.innerHTML = "";

            data.list.forEach((item, index) => {
                const isFirstItem = index === 0;
                const liClass = isFirstItem ? "on" : "";
                const rank = (index + 1).toString().padStart(2, '0');

                ulElement.innerHTML += `
                    <li class="${liClass}" onclick='jumps(${JSON.stringify(item.story)})'>
                        <p>${rank}</p>
                        <div>
                            <span class="bookName">${item.story?.name || '未知书名'}</span>
                            <span class="author">${item.story?.type || ''}|${item.story?.author || '未知作者'}</span>
                            <p class="tiket">${formatNumber(item.topValue) || 0}人气值</p>
                        </div>
                        <img src="${item.story?.cover || ''}" alt="${item.story?.name || '书籍封面'}">
                    </li>
                `;
            });

            const liItems = ulElement.querySelectorAll("li");
            liItems.forEach(item => {
                item.addEventListener('mouseover', function () {
                    liItems.forEach(li => li.classList.remove('on'));
                    this.classList.add('on');
                });
            });
        }

        function fetchData(type = 'week') {
            const rankId = typeMap[type];
            const url = `${baseUrl}${rankId}/7?cb=1756429753063`;

            fetch(url)
                .then(res => res.json())
                .then(res1 => {
                    renderData(res1, onul);
                })
                .catch(err => {
                    console.error('新书榜请求失败:', err);
                });
        }

        // 初始化加载周榜
        fetchData('week');

        // 绑定 tab 点击事件
        tabs.forEach(tab => {
            tab.addEventListener('click', function () {
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');

                const type = this.getAttribute('data-type');
                fetchData(type);
            });
        });
    });
</script>
<!-- 连载更新 免费小说 -->
<script>
    // 连载更新 - 免费和VIP切换功能
    document.addEventListener("DOMContentLoaded", function () {
        // 获取切换按钮
        const freeBtn = document.querySelector('.cutBtn-list-on');
        const vipBtn = document.querySelector('.cutBtn-list');

        // 获取列表容器
        const bookRect = document.querySelector('.bookRect');

        // 确保元素存在
        if (!freeBtn || !vipBtn || !bookRect) {
            console.error("切换按钮或列表容器未找到");
            return;
        }

        // 当前状态（true为免费，false为VIP）
        let isFree = true;

        // 切换状态函数
        function switchTab(toFree) {
            if (isFree === toFree) return; // 如果状态相同则不处理

            if (toFree) {
                // 切换到免费小说
                freeBtn.classList.add('cutBtn-list-on');
                freeBtn.classList.remove('cutBtn-list');
                vipBtn.classList.add('cutBtn-list');
                vipBtn.classList.remove('cutBtn-list-on');
                loadFreeList();
            } else {
                // 切换到VIP小说
                vipBtn.classList.add('cutBtn-list-on');
                vipBtn.classList.remove('cutBtn-list');
                freeBtn.classList.add('cutBtn-list');
                freeBtn.classList.remove('cutBtn-list-on');
                loadVipList();
            }

            isFree = toFree;
        }

        // 加载免费小说列表
        function loadFreeList() {
            const apiUrl = "https://www.hotread.com/api/home/freeList?cb=1756458011800";

            fetch(apiUrl)
                .then(response => response.text())
                .then(text => {
                    const jsonStr = text.replace(/^1756458011800\(|\)$/g, "");
                    return JSON.parse(jsonStr);
                })
                .then(data => {
                    const novelList = data.freeList || [];
                    renderList(novelList, true);
                })
                .catch(error => {
                    console.error("免费小说数据加载失败：", error);
                });
        }

        // 加载VIP小说列表
        function loadVipList() {
            const apiUrl = "https://www.hotread.com/api/home/vipList?cb=1756458700956";

            fetch(apiUrl)
                .then(response => response.text())
                .then(text => {
                    const jsonStr = text.replace(/^1756458700956\(|\)$/g, "");
                    return JSON.parse(jsonStr);
                })
                .then(data => {
                    const novelList = data.vipList || [];
                    renderList(novelList, false);
                })
                .catch(error => {
                    console.error("VIP小说数据加载失败：", error);
                });
        }

        // 渲染列表
        function renderList(novelList, isFreeList) {
            if (novelList.length === 0) {
                console.warn("小说列表为空");
                return;
            }

            // 保留标题行
            const titleRow = bookRect.querySelector('.list-title');
            bookRect.innerHTML = '';
            if (titleRow) {
                bookRect.appendChild(titleRow);
            }

            // 渲染数据
            novelList.forEach((item, index) => {
                // 免费和VIP列表的数据结构可能不同
                const story = isFreeList ? (item.story || {}) : (item.story || {});
                const {
                    type: novelType,
                    name: bookName,
                    lastChapter,      // VIP接口可能使用这个字段
                    latestChapter,    // 免费接口使用这个字段
                    author,
                    updateTime,
                    updatedTime,
                    latestChapterTime
                } = story;

                // 处理章节名（兼容不同字段）
                const chapter = latestChapter || lastChapter || "未更新";

                // 处理时间（兼容不同字段和格式）
                const timeValue = latestChapterTime || updateTime || updatedTime || Date.now();
                const formatTime = formatUpdateTime(timeValue);

                // 创建并插入li元素
                const li = document.createElement("li");

                // 根据是否为VIP列表决定是否添加VIP图标
                if (isFreeList) {
                    // 免费小说不显示VIP图标
                    li.innerHTML = `
                    <span class="num" onclick='jumps(${JSON.stringify(item.story)})'>${(index + 1).toString().padStart(2, "0")}</span>
                    <span class="type" onclick='jumps(${JSON.stringify(item.story)})'>[${novelType || "未知分类"}]</span>
                    <span class="bookName" onclick='jumps(${JSON.stringify(item.story)})'>${bookName || "未知名称"}</span>
                    <span class="chapter" onclick='jumps(${JSON.stringify(item.story)})'>${chapter}</span>
                    <span class="author" onclick='jumps(${JSON.stringify(item.story)})'>${author || "未知作者"}</span>
                    <span class="time" onclick='jumps(${JSON.stringify(item.story)})'>${formatTime}</span>
                `;
                } else {
                    // VIP小说显示VIP图标
                    li.innerHTML = `
                    <span class="num" onclick='jumps(${JSON.stringify(item.story)})'>${(index + 1).toString().padStart(2, "0")}</span>
                    <span class="type" onclick='jumps(${JSON.stringify(item.story)})'>[${novelType || "未知分类"}]</span>
                    <span class="bookName" onclick='jumps(${JSON.stringify(item.story)})'>${bookName || "未知名称"}<img src="https://c.hotread.com/boyPc/assets/images/vip.png" style="width: 24px; height: 12px; margin-left: 5px; vertical-align: middle;" alt="VIP"></span>
                    <span class="chapter" onclick='jumps(${JSON.stringify(item.story)})'>${chapter}</span>
                    <span class="author" onclick='jumps(${JSON.stringify(item.story)})'>${author || "未知作者"}</span>
                    <span class="time" onclick='jumps(${JSON.stringify(item.story)})'>${formatTime}</span>
                `;
                }

                bookRect.appendChild(li);
            });
        }

        // 格式化时间
        function formatUpdateTime(timestamp) {
            if (!timestamp) return '';

            let date;

            // 如果是字符串且包含日期格式
            if (typeof timestamp === 'string' && timestamp.includes('-')) {
                date = new Date(timestamp);
            }
            // 秒级时间戳
            else if (timestamp.toString().length === 10) {
                date = new Date(timestamp * 1000);
            }
            // 毫秒级时间戳
            else if (timestamp.toString().length === 13) {
                date = new Date(timestamp);
            }
            // 其他情况
            else {
                date = new Date(timestamp);
            }

            // 检查日期是否有效
            if (isNaN(date.getTime())) return '';

            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, "0");
            const day = date.getDate().toString().padStart(2, "0");
            const hours = date.getHours().toString().padStart(2, "0");
            const minutes = date.getMinutes().toString().padStart(2, "0");

            return `${year}-${month}-${day} ${hours}:${minutes}`;
        }

        // 绑定点击事件
        freeBtn.addEventListener('click', () => switchTab(true));
        vipBtn.addEventListener('click', () => switchTab(false));

        // 默认加载免费小说
        loadFreeList();
    });
</script>
<!-- 勤奋榜 -->
<script>
    const diligenceOnul = document.querySelector(".rank6171 .onul");

    // 格式化时间为"多久之前"的函数
    function formatTimeAgo(timeString) {
        if (!timeString) return '1分钟前';

        // 解析时间字符串 "2025-08-29 17:39:00"
        const date = new Date(timeString.replace(' ', 'T'));

        const now = new Date();
        const diffMs = now - date;
        const diffMins = Math.floor(diffMs / 60000);
        const diffHours = Math.floor(diffMs / 3600000);
        const diffDays = Math.floor(diffMs / 86400000);

        if (diffMins <= 0) {
            return '1分钟前';
        } else if (diffMins < 60) {
            return `${diffMins}分钟前`;
        } else if (diffHours < 24) {
            return `${diffHours}小时前`;
        } else {
            return `${diffDays}天前`;
        }
    }

    fetch("https://www.hotread.com/api/common/rank/6171/0/8?cb=1756460609258")
        .then(res => res.json())
        .then(res1 => {
            diligenceOnul.innerHTML = "";

            res1.list.forEach((item, index) => {
                // 判断是否为第一个元素（index=0）
                const isFirstItem = index === 0;
                // 动态设置类名：第一个元素默认添加"on"，其他元素根据需要设置
                const liClass = isFirstItem ? "on" : "";

                // 排名数字格式化（确保两位数显示，如1→01，10→10）
                const rank = (index + 1).toString().padStart(2, '0');

                // 使用更新时间格式化为"多久之前"
                const updateTime = item.story?.updateTime || new Date().toISOString().slice(0, 19).replace('T', ' ');
                const timeAgo = formatTimeAgo(updateTime);

                diligenceOnul.innerHTML += ` 
        <li class="${liClass}" onclick='jumps(${JSON.stringify(item.story)})'>
          <p>${rank}</p>
          <div>
            <span class="bookName">${item.story?.name || '未知书名'}</span>
            <span class="author">${item.story?.type || ''}|${item.story?.author || '未知作者'}</span>
            <p class="tiket">${timeAgo}</p>
          </div>
          <img src="${item.story?.cover || ''}" alt="${item.story?.name || '书籍封面'}">
        </li>
      `;
            });

            // 绑定鼠标事件（处理动态生成的元素）
            const liItems = diligenceOnul.querySelectorAll("li");
            liItems.forEach(item => {
                item.addEventListener('mouseover', function () {
                    liItems.forEach(li => li.classList.remove('on'));
                    this.classList.add('on');
                });
            });

        }).catch(err => {
            console.log(err);
        });
</script>
<script>
    function jumpNv(){
        location.href='./channel.html?'
    }
    function login(){
        location.href=`./personal.html`
    }
    function jumpManhua(){
        location.href='./comic.html?'
    }
    function jumpBook(){
        location.href='./book.html?'
    }
    function jumps(hearf){
       location.href=`./detail.html?${JSON.stringify(hearf)}`
    }
    function jumpAuthor(){
        location.href='./personal.html?'
    }
    function jumpRank(){
        location.href='./rank.html?'
    }
    function jumpClient(){
        location.href='./client.html?'
    }
    function jumpRegis() {
        location.href='./register.html?'
    }
    function jumpWelfare() {
        location.href='./author.html'
    }
</script>
</html>